<template>
	<view class="user_selfmessage">
		<view class="avg_message">
			<view class="">
				头像
			</view>
			<view class="image_header" @click="seImage">
				<img style="width: 90rpx;height:90rpx;" :src="avatar" alt="">
			</view>
		</view>
		<view class="avg_message">
			<view class="">
				昵称
			</view>
			<view class="image_header">
				<view class="name_message" style="padding-right: 20rpx;">
					<input type="text" style="text-align: right;" v-model="nickName" placeholder="请输入昵称">
				</view>
			</view>
		</view>
		<view class="avg_message">
			<view class="">
				手机号码
			</view>
			<view class="image_header">
				<input type="text" style="text-align: right;" v-model="phone" placeholder="请输入手机号">
			</view>
		</view>
		<view class="avg_message">
			<view class="">
				地址
			</view>
			<view class="image_header">
				<input type="text" style="text-align: right;" v-model="address" placeholder="请输入地址">
			</view>
		</view>
		<view class="avg_message">
			<view class="">
				邮箱
			</view>
			<view class="image_header">
				<input type="text" style="text-align: right;" v-model="email" placeholder="请输入邮箱">
			</view>
		</view>
		<view class="avg_message">
			<view class="">
				性别
			</view>
			<view class="image_header">
				<input type="text" style="text-align: right;" v-model="sex" placeholder="请输入性别">
			</view>
		</view>
		<view class="bottom_button">
			<u-button type="primary" @click="onSumbit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import settings from '../../utils/settings.js'
	import {
		getUserEdit,
		getUserinfo
	} from '../../api/index.js'

	export default {
		data() {
			return {
				avatar: '/static/logo.png',
				nickName: '666',
				phone: '',
				address: '',
				sex: '',
				email:''
			}
		},
		onLoad() {
			this.getUserinfoMessage()
		},
		methods: {
			// 获取个人信息
			getUserinfoMessage() {
				getUserinfo().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.avatar = res.data.image;
						this.nickName = res.data.nickname;
						this.phone = res.data.phone;
						this.address = res.data.address;
						this.sex = res.data.sex;
						this.email = res.data.email
					}
				})
			},
			// 上传图片
			seImage() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						uni.uploadFile({
							method: 'POST',
							url: settings.baseUrl + settings.uploadUrl,
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								"Authorization": uni.getStorageSync(
								'token'), // 让每个请求携带自定义token 请根据实际情况自行修改
							},
							formData: {
								file: JSON.stringify(res.tempFilePaths[0])
							},
							success: (res) => {
								console.log(res, '成功');
								let setImage = JSON.parse(res.data)
								console.log(setImage, "json之后的数据");
								if (setImage.code == 1) {
									that.avatar = setImage.data.path
								} else {
									this.$uni.gettitle('上传失败!')
								}

							}
						});
					}
				});
			},
			onSumbit() {
				if(!this.avatar) return this.$uni.gettitle('请上传头像!')
				if(!this.nickName) return this.$uni.gettitle('请输入昵称!')
				if(!this.address) return this.$uni.gettitle('请输入地址!')
				if(!this.sex) return this.$uni.gettitle('请选择性别!')
				if(!this.email) return this.$uni.gettitle('请输入邮箱!')
				if(!this.phone ) return this.$uni.gettitle('请输入手机号!')
				var result = this.$phone.isPoneAvailable(this.phone)
				if(!result) return this.$uni.gettitle('请输入正确的手机号!')
				
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否修改',
					confirmColor: '#269fde',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击了确认');
							
							getUserEdit({
								nickname: this.nickName,
								sex: this.sex,
								phone: this.phone,
								address: this.address,
								email: this.email,
								image: this.avatar,
							}).then(res => {
								console.log(res);
								if (res.code == 1) {
									this.$uni.gettitle(res.msg)
									setTimeout(() => {
										uni.navigateBack(1)
									}, 1000)
								} else {
									this.$uni.gettitle(res.msg)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.user_selfmessage {
		background-color: rgb(246, 246, 246);
		height: 100vh;

		.avg_message {
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 25rpx;
			border-top: solid 1rpx #EBEBEB;

			.image_header {
				display: flex;
				align-items: center;
				height: 134rpx;

				image {
					margin-left: 30rpx;
					width: 550rpx;
					height: 55rpx // width: 500rpx;
				}

				.direction {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.name_message {
			color: #666666;
		}
	}
</style>